<template>
  <div>
    <!-- 过滤器 -->
    <Filtrate :filterListData="filterListData" :filterInfoObj="filterInfoObj" :changeFilterInfoObj="changeFilterInfoObj" :getRecommendInfo="getRecommendInfo"></Filtrate>
    <div class="cards">
      <!-- 卡片列表 -->
      <Card v-for="recommend in recommendContent" :key="recommend.id" :data="recommend"></Card>
      <el-button size="large" v-if="recommendContent.length" style="padding: 0 40px" @click="getRecommendInfo(++pageNum, false)">加载更多</el-button>
      <div v-else class="no-data">
        <h1>无更多数据</h1>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import Card from '@/components/Card/index.vue';
import { inject, onMounted, ref } from 'vue';
import { getRecommendListInfo, getFilterListData, getProductionListInfo } from '@/api/home';
import Filtrate from '@/components/Filtrate/index.vue';


const pageSize = ref(20); // 每页条数
const pageNum = ref(0); // 当前页
const localCache = ref(0);
const recommendContent = ref<any[]>([]); // 保存推荐的数据列表

// 获取作品、教程、专题列表数据 请求体的数据
const filterInfoObj = ref({
  filterInfo: []
})

// 改变 filterInfoObj 的数据后，在此调用getRecommendInfo，带着筛选条件去获取数据
const changeFilterInfoObj = (newFilterInfoObj: any) => {
  filterInfoObj.value = newFilterInfoObj;
  getRecommendInfo(0, true);
  // console.log(filterInfoObj.value);
}

// 获取推荐列表数据
const getRecommendInfo = async (pageNum: number, flag: boolean, bang: string = 'integrated') => {
  try {
    const { data } = await getProductionListInfo(pageSize.value, pageNum, 'course', bang, filterInfoObj.value);
    // 如果flag为true，清空用于渲染卡片的数据，重新获取
    if (flag) {
      recommendContent.value = data.content;
      return;
    }
    // 向数组中累加推荐数据对象
    recommendContent.value.push(...data.content);
  } catch (error) {
    console.error(error);
  }
}


// 保存过滤列表数据
const filterListData = ref([]);
const getFilterData = async () => {
  try {
    const { data } = await getFilterListData('course');
    data.forEach((item: any) => {
      // 每个类别下面添加每个类别的初始筛选值
      item.maxFilterNum = 0;
      item.choises.forEach((item2: any) => {
        // 单个筛选按钮下面添加是否选中的状态
        item2.isSelect = false;
      })
    })
    filterListData.value = data;
  } catch (error) {
    console.error(error);
  }
}

onMounted(() => {
  // 挂载页面之后获取推荐列表数据
  getRecommendInfo(0, false);
  // 挂载页面之后获取筛选列表数据
  getFilterData();
});

</script>

<style lang="less" scoped>
.cards {
  overflow: hidden;

  .el-button {
    display: block;
    margin: 0 auto;
  }

  .card:nth-child(5n) {
    margin-right: 0;
  }
  .no-data {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
    h1 {
      color: #ccc;
    }
  }
}
</style>